<template>
	<view class="container">
		<view class="header">
			<view class="item">
				<view class="left">
					<view class="title-box">
						<view class="title">
							今日错题
						</view>
						<view class="red-circle">
							
						</view>
					</view>
					<view class="text">
						新增17题
					</view>
				</view>
				<image src="https://q-api.lanbeiduo.com/api/file/download/i0aFausY7Y_9d91f2d7-f3a6-4151-aa91-d0eccf44ab02.png" class="icon"></image>
				<!-- <image src="https://q-api.lanbeiduo.com/api/file/download/4jGbkEhgWO_1d125428-a15d-407f-93ca-e3b9f6bc20ad.png" mode="" class="icon"></image> -->
			</view>
			<view class="item">
				<view class="left">
					<view class="title">
						全部错题
					</view>
					<view class="text">
						共47题
					</view>
				</view>
				<image src="https://q-api.lanbeiduo.com/api/file/download/RgtDu43IJT_7a32eb93-4354-4d9f-aed1-b413d8707936.png" mode="" class="icon"></image>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="title">
					错题详情
				</view>
				<view class="right">
					<u-icon name="setting" size="40"></u-icon>
					<!-- trash star star-fill -->
					<view class="">
						移除设置
					</view>
				</view>
			</view>
			<view class="types">
				<view class="item">
					<view class="left">
						<view class="num">
							1
						</view>
						<view class="">
							单选题
						</view>
					</view>
					<view class="right">
						<view class="">
							47题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="num">
							2
						</view>
						<view class="">
							判断题
						</view>
					</view>
					<view class="right">
						<view class="">
							0题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="num">
							3
						</view>
						<view class="">
							多选题
						</view>
					</view>
					<view class="right">
						<view class="">
							0题
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin
	} from "@/common"
	
	onLoad((options) => {
		
	})
	onShow(() => {

	})
	onHide(() => {

	})
	onUnload(() => {
		
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F9F9F9;
		padding: 40rpx 20rpx;
		.header{
			display: flex;
			justify-content: space-between;
			.item{
				width: 49%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 20rpx;
				.left{
					.title{
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 18rpx;
						position: relative;
					}
					.title-box{
						display: flex;
						
						.red-circle{
							width: 12rpx;
							height: 12rpx;
							background-color: red;
							border-radius: 50%;
						}
					}
					.text{
						font-size: 26rpx;
					}
					.text{
						color: #696969;
					}
				}
				.icon{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.content{
			background-color: #fff;
			padding: 40rpx 20rpx 20rpx 20rpx;
			margin-top: 30rpx;
			.top{
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 34rpx;
					font-weight: bold;
				}
				.right{
					display: flex;
					align-items: center;
					view{
						margin-left: 10rpx;
					}
				}
			}
			.types{
				margin-top: 20rpx;
				.item{
					display: flex;
					justify-content: space-between;
					padding: 34rpx 0;
					.left{
						display: flex;
						align-items: center;
						.num{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #1667EA;
							color: #fff;
							margin-right: 20rpx;
						}
					}
					.right{
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
